<template>
  <div>
    <div
      ref="orderOverview"
      class="map"
    ></div>
  </div>
</template>

<script>
import { getWorkSpaceData } from '@/api/dashboard'
import * as _ from 'lodash'
import * as echarts from 'echarts'
export default {
  name: 'OrderChart',

  data() {
    return {
      chart: null,
      orderLineChart: null,
      month: null,
      monthData: null
    }
  },
  async mounted() {
    const { data } = await getWorkSpaceData()
    this.orderLineChart = data.orderLineChart

    this.month = this.orderLineChart.monthlyOrderList.map(item => item.dateTime)
    this.monthData = this.orderLineChart.monthlyOrderList.map(item => item.orderNumber)
    // 订单概述
    this.chart = echarts.init(this.$refs.orderOverview)
    this.chart.setOption({
      // Make gradient line here
      visualMap: [
        {
          show: false,
          type: 'continuous',
          seriesIndex: 0,
          min: 0,
          max: 400
        }
      ],
      xAxis: {
        type: 'category',
        data: this.month
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: this.monthData,
          type: 'line'
        }
      ]
    })
    //  节流
    window.addEventListener('resize', this.resizeChart)
  },
  destroyed() {
    // 凡是挂载在windows上的事件，离开页面记得要清除销毁
    window.removeEventListener('resize', this.resizeChart)
  },
  methods: {
    // 节流自适应
    resizeChart: _.debounce(function() {
      this.chart.resize()
    }, 300)
  }
}
</script>

<style lang="scss" scoped>
.map {
  height: 500px;
}
</style>
